<template>
  <ElPopover
    ref="popover"
    width="200"
    :reference="reference"
    popper-class="fa-widget-popover fa-contract-scope"
    @after-leave="afterClose"
  >
    <ElForm class="fa-sign-spec-form" :model="data" @submit.native.prevent>
      <header class="fa-widget-popover__hd">
        {{ data.option.name }}规格

        <!-- <ElCheckbox v-model="options.dateSignGlobal" @change="options.dateSignGlobal && $emit('change')"
          >应用于全局</ElCheckbox
        > -->
      </header>

      <SignSpec :data="data" />

      <footer class="fa-sign-spec-form__ft">
        <a class="fa-widget-link reset-link" @click="reset">恢复默认</a>
      </footer>
    </ElForm>
  </ElPopover>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import { SignOptions } from '@/types'
import { Widget } from '@/models'
import usePopover from '@/utils/compositions/usePopover'
import SignSpec from './SignSpec.vue'

export default defineComponent({
  name: 'FaSignSpecPop',

  components: { SignSpec },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 签署选项 */
    options: {
      type: Object as PropType<SignOptions>,
      required: true
    },

    /** 触发节点 */
    reference: {
      type: HTMLElement as PropType<HTMLElement | null>
    }
  },

  setup(props, { emit }) {
    return {
      ...toRefs(usePopover(emit)),

      /** 重置 */
      reset() {
        const widget = props.data
        const { w, h } = widget.signSize

        Object.assign(widget, { w, h })

        widget.restoreOrigin()
      }
    }
  }
})
</script>

<style lang="scss">
.fa-sign-spec-form {
  .fa-sign-spec {
    margin-top: 4px;

    .size-item {
      margin-bottom: 16px;

      .el-form-item__label,
      .unit {
        font-size: 12px;
      }
    }
  }

  &__ft {
    margin-top: 16px;
    text-align: center;
  }
}
</style>
